<script setup defer async lang="ts">
import { scanCode, scanCodeResult, getPhoneCode,platformConfig } from '@/api/user'
import { initFaceBook, trackEvent } from '@/utils/facebookService'
import { reactive, nextTick, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'
import _ from 'lodash'
const statId = ref(null);
	const statTypeExt = ref("");
const { t } = useI18n()
const phoneNumber = ref('91')
const countdown = ref(120)
const sss = ref('Get OTP')
const isCountingDown = ref(false)
const verificationCode = ref('') // 
const verificationCodePopupVisible = ref(false) // 
const refeshQrIsRun = ref(false)
const scales = reactive({
  step1: false,
  step2: false,
  step3: false,
  step4: false,
})
const currentZoomedImage = ref<string | null>(null)
const chooseVerificationPopupShow = ref(false) // 
const chooseValue = ref('') // 
const selectedCountry = ref({
  name: 'India',
  code: '+91',
  flag: '🇮🇳'
})
const accountType = ref('business');
//
const videoPopupVisible=ref(false);
	const showVideoPopup=()=>{
		videoPopupVisible.value=true;
	}
  const closeVideoPopup=()=>{
		videoPopupVisible.value=false;
	}
//page
const pagedata = reactive({
  todayPoints: 0,
  totalPoints: 0,
  yesterdayPoints: 0,
  showLoginOut: false,
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
  platformObj: {
    normal_acc_login: 1,
    biz_acc_login: 1,
    universal_acc_login: 1,
  } as any,
  pagelist: [
    'index/index',
    'scan/index',
    'user/index',
    'withdraw/index',
    'user/leaderBoard/index',
    'login/index',
    'user/revenue/revenue',
    'user/withdreawalInfo/withdreawalInfo',
    'user/message/message',
    'user/changPassword/changPassword',
    'user/level/level',
    'user/whatsApp/index',
  ],
})
const pageIndex = ref(4)
const changPage = (e: any) => {
  uni.navigateTo({
    url: '/pages/' + pagedata.pagelist[e],
  })
}
const changMainPage = (e: any) => {
  console.log(getCurrentPages())
  //   window.top?.postMessage(`/pages/${pagedata.pagelist[e]}`, window.location.origin)
  uni.navigateTo({
    url: '/pages/' + pagedata.pagelist[e],
  })
}
const chooseVerificationType = (str: string) => {
  chooseValue.value = str
  openVerification();
}
const closeChooseVerificationPopup = () => {
  chooseVerificationPopupShow.value = false
}
// const openChooseVerificationPopup = (num: number) => {

//   chooseValue.value = ''
//   if(num==1){
//     // 
//   chooseVerificationPopupShow.value = true
//   }else{
//   //
//   verificationCodePopupVisible.value = true
//   }  
  
// }

const openVerification = (str: string) => {
  if (str === 'scan') {
    closeChooseVerificationPopup()
    verificationCodePopupVisible.value = false
    
    refeshQr()
  }
  if (str === 'phone') {
    resetAllSetInterval()
    closeChooseVerificationPopup()
    nextTick(() => {
      baseData.show = false
      verificationCodePopupVisible.value = true
    })
  }
}

const handleImageClick = (imageId: string) => {
  if (currentZoomedImage.value === imageId) {
    currentZoomedImage.value = null
  } else {
    currentZoomedImage.value = imageId
  }
}

const handleOverlayClick = () => {
  currentZoomedImage.value = null
}

const closeVerificationCodePopup = () => {
  verificationCodePopupVisible.value = false
  phoneNumber.value = countryCodes[countryNum.value] || '91';
    verificationCode.value=''
  	isCountingDown.value=false;
  resetAllSetInterval()
}

const openVerificationCodePopup = () => {
  verificationCodePopupVisible.value = true
}

const codeChange = (value: string) => {
  console.log('Code changed:', value)
}

const codeFinish = (value: string) => {
  console.log('Code completed:', value)
}

const baseData = reactive({
  show: false,
  seeQr: false,
  loadQr: false,
  qrCode: null,
  seconds: 20,
  interTimer: null as number | null,
  randomStr: '',
  showSuccess: false,
  wsAccount: '',
  currentCode: 0, //
  changeCodeTime: 20, //
  changeCodeTimer: null as number | null,
  aTimer: null as number | null,
  verificationTimer: null as number | null,
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
})

const sures = () => {
  baseData.showSuccess = false;
  // uni.navigateTo({
  //   url: '/pages/index/index',
  // })
}

const resetAllSetInterval = () => {
  // 
  if (baseData.interTimer) {
    clearInterval(baseData.interTimer)
    baseData.interTimer = null
  }
  if (baseData.changeCodeTimer) {
    clearInterval(baseData.changeCodeTimer)
    baseData.changeCodeTimer = null
  }
  if (baseData.aTimer) {
    clearInterval(baseData.aTimer)
    baseData.aTimer = null
  }
  if (baseData.verificationTimer) {
    clearInterval(baseData.verificationTimer)
    baseData.verificationTimer = null
  }
}
const phoneCodeType=ref(1);
const getVerificationCode = (type:any) => {
		// const regex = /^(?!1)\d+$/;
		
		// if (!regex.test(phoneNumber.value)) {
		//   uni.showToast({
		//     title: t('Prohibit the country code from logging in'),
		//     icon: "none"
		//   })
		//   return;
		// }
 if (isCountingDown.value) return;
 phoneCodeType.value=type;
 // jydebounce(startCountdown(), 1000, false);
 
 _.debounce(startCountdown, 2000)();
}
const startCountdownIsRun = ref(false);
	const startCountdown = async () => {
		if (startCountdownIsRun.value) return;
		try {
			startCountdownIsRun.value = true;
			// TODO 
			// verificationCode.value = 'K8SDOCK7'
			baseData.randomStr = Date.now().toString(36) + Math.random().toString(36).slice(2, 11);
			 resetAllSetInterval();
			const res = await getPhoneCode({
				uuid: baseData.randomStr,
				phone: phoneNumber.value,
				type:phoneCodeType.value
			});
			if (res.code === 0) {
				isCountingDown.value = true;
				countdown.value = 120;
				sss.value = `${countdown.value}s`;
				verificationCode.value = res.data.phone_code;
				if (baseData.verificationTimer) {
					clearInterval(baseData.verificationTimer);
					baseData.verificationTimer = null;
				}
				baseData.verificationTimer = setInterval(() => {
					countdown.value--;
					sss.value = `${countdown.value}s`;

					if (countdown.value <= 0) {
						// clearInterval(baseData.verificationTimer);
						clearInterval(baseData.interTimer);
						baseData.interTimer = null;
						clearInterval(baseData.verificationTimer);
						baseData.verificationTimer = null;
						baseData.verificationTimer = null;
						sss.value = 'Get OTP';
						isCountingDown.value = false;
					}
				}, 2000)
				baseData.interTimer = setInterval(getSuccess, 2000) 
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
			startCountdownIsRun.value = false;
		} catch (error) {
			console.log(error);
		}
	}



const copeVerificationCode = () => {
  uni.setClipboardData({
    data: verificationCode.value,
    success: () => {
      uni.showToast({
        title: t('Copied successfully'),
        icon: 'success',
      })
    },
  })
}

const refeshQr = async () => {
  if (refeshQrIsRun.value) return
  try {
    refeshQrIsRun.value = true
    baseData.randomStr = Date.now().toString(36) + Math.random().toString(36).slice(2, 11)
    const res = await scanCode({ uuid: baseData.randomStr })
    if (res.code == 0) {
      baseData.qrCode = res.data
      baseData.show = true
      baseData.seeQr = true
      baseData.loadQr = true
      baseData.seconds = 20
      baseData.currentCode = 0
      
      if (baseData.interTimer) {
        clearInterval(baseData.interTimer)
        baseData.interTimer = null
      }
      baseData.interTimer = setInterval(() => {
        baseData.seconds--
        if (baseData.seconds <= 0) {
          baseData.seconds = 20
          baseData.currentCode = (baseData.currentCode + 1) % baseData.qrCode.QRCodeEvent.QRCode.length
        }
      }, 1000)
      
      if (baseData.aTimer) {
        clearInterval(baseData.aTimer)
        baseData.aTimer = null
      }
      baseData.aTimer = setInterval(() => {
        getSuccess()
      }, 2000)
    }
  } catch (error) {
    console.error(':', error)
  } finally {
    refeshQrIsRun.value = false
  }
}

const getSuccess = async () => {
  try {
    const res = await scanCodeResult({ uuid: baseData.randomStr })
	// isCountingDown.value=false;
    if (res.code == 0) {
		if (statTypeExt.value === "2") {
			initFaceBook( statId.value);
		}
      // trackEvent('track', 'CompleteRegistration')
      // uni.setStorageSync('PixelId', '')
      resetAllSetInterval()
      baseData.seeQr = false
      baseData.show = false
      baseData.loadQr = false
      uni.showToast({
        title: res.data + t('login success'),
      })
      baseData.wsAccount = res.data
      baseData.showSuccess = true
      verificationCodePopupVisible.value = false
      phoneNumber.value = ''
      verificationCode.value = ''
    }
  } catch (error) {
    console.error(':', error)
  }
}

const closePop = () => {
  resetAllSetInterval()
  baseData.show = false
  baseData.seeQr = false
  baseData.loadQr = false
  baseData.currentCode = 0
}
const countryNum=ref(1);
const countryCodes: Record<number, string> = {
  1: '91',
  2: '62',
  3: '234',
  4: '880',
  5: '92',
}
onMounted(async() => {
  countryNum.value=uni.getStorageSync('country');
  phoneNumber.value = countryCodes[countryNum.value] || 91;
  statId.value = uni.getStorageSync('PixelId');
  statTypeExt.value = uni.getStorageSync('typeExt');
    const rep = await platformConfig()
	if (rep.code == 0) {
		pagedata.platformObj=rep.data
	}
})
</script>

<template>
  <view class="scan-container">
    <!--  -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
      <view class="floating-shape shape-1"></view>
      <view class="floating-shape shape-2"></view>
      <view class="floating-shape shape-3"></view>
    </view>

    <!--  -->
    <view class="header-section">
      <view class="brand-title">
        <text class="title-text" :data-text="t('Scan to Login')">{{ t('Scan to Login') }}</text>
        <view class="title-icon"></view>
      </view>
      <text class="subtitle">{{ t('Quick and secure login') }}</text>
      
      <!--  -->
      <view class="particles">
        <view class="particle"></view>
        <view class="particle"></view>
        <view class="particle"></view>
        <view class="particle"></view>
        <view class="particle"></view>
      </view>
    </view>

    <!--  -->
    <view class="video-section" @click="showVideoPopup">
      <view class="video-container">
        <video 
          class="demo-video"
          :src="baseData.aircraftUrl" 
          autoplay 
          loop 
          muted
          :show-center-play-btn="false"
          :show-play-btn="false"
          :controls="false"
          @loadedmetadata="onVideoLoaded"
        ></video>
        <view class="video-overlay">
          <view class="play-indicator">
            <text class="play-icon"></text>
          </view>
          <text class="video-duration">00:28</text> <!--  -->
        </view>
      </view>
    </view>

    <!--  -->
    <view class="action-section">
      <view class="action-buttons">
        <view class="primary-btn" @click="openVerification('phone')">
          <view class="btn-content">
            <view class="btn-icon">📱</view>
            <text class="btn-text">{{ t('Phone Login') }}</text>
          </view>
          <!--  -->
          <view class="btn-particles">
            <view class="particle"></view>
            <view class="particle"></view>
            <view class="particle"></view>
            <view class="particle"></view>
          </view>
        </view>
        
       <!-- <view class="secondary-btn" @click="openVerification('scan')">
          <view class="btn-content">
            <view class="btn-icon">📷</view>
            <text class="btn-text">{{ t('Scan QR Code') }}</text>
          </view>
        </view> -->
      </view>
    </view>

    <!--  -->
    <up-popup :show="baseData.show" mode="center" @close="closePop">
		  	<view class="bodys">
		  		<view class="heads">
		  			{{t('Scan by')}} WhatApp
		  		</view>
		  		<view class="qrboder">
		  			<image v-show="!baseData.seeQr" src="../../static/video/qr.png"></image>
		  			<view v-if="baseData.seeQr" class="qrimg">
		  				<up-qrcode icon="../../static/rb3.png" :size="176"
		  					:val="baseData.qrCode.QRCodeEvent.QRCode[baseData.currentCode]"></up-qrcode>
		  			</view>
		  
		  			<view class="qrs" v-show="!baseData.seeQr">
		  				<view class="ti" v-show="!baseData.loadQr">{{t('The QR code has expired')}}!</view>
		  				<view class="btnss" v-show="!baseData.loadQr" @click="refeshQr">{{t('Refesh')}}</view>
		  
		  				<up-loading-icon v-show="baseData.loadQr" mode="semicircle"
		  					color="rgb(25, 45, 210)"></up-loading-icon>
		  				<view class="ti" v-show="baseData.loadQr" style="margin-top: 1rem;">{{t('Loading')}}</view>
		  			</view>
		  			<view class="scans" v-show="baseData.seeQr">
		  
		  			</view>
		  		</view>
		  		<view class="hrs"></view>
		  		<view v-show="baseData.currentCode<6"
		  			style="width: 16rem;margin: 10px auto 0 auto;display: flex;flex-flow: row nowrap;align-items: center;">
		  			<up-line-progress :percentage="baseData.seconds/20*100" activeColor="rgb(25, 45, 210)">
		  				<text class="u-percentage-slot">{{baseData.seconds}}s</text></up-line-progress>
		  			<!-- <span style="color: #FF5800;margin-left:10px;font-size: 12px;">{{baseData.currentCode+1}}/6</span> -->
		  		</view>
		  	</view>
		  </up-popup>

    
    <up-popup 
      :show="verificationCodePopupVisible"
      mode="bottom"
      class="custom-width-bottom"
      @close="closeVerificationCodePopup"
      :round="16"
      :closeable="false"
    >
      <view class="bind-account-popup">
        <!--  -->
        <view class="popup-header">
          <view class="popup-title">{{ t('Bind account') }}</view>
          <view class="popup-close" @click="closeVerificationCodePopup">×</view>
        </view>

        <!-- 步骤1 -->
        <view class="step-container">
          <view class="step-label">{{ t('1. Enter your WhatsApp phone number:') }}</view>

          <view class="phone-input-row">
            <view class="input-container">
              <view class="country-code">+</view>
              <input class="phone-input" type="number" :placeholder="t('Please enter')" v-model="phoneNumber" />
            </view>

          <!-- <up-button
              style="width: 4rem; height: 40px"
              :class="['timer']"
              :disabled="isCountingDown"
              :loading="startCountdownIsRun"
              @click="getVerificationCode"
            >
              {{ t('Get key') }}
            </up-button> -->
          </view>

          <!-- 账号类型按钮 -->
          <view class="account-type-buttons">
            <up-button
              v-if="pagedata.platformObj.biz_acc_login == 1"
              style="width: 6rem; height: auto; min-height: 40px"
              :class="['timer', 'multi-line-btn']"
              :disabled="isCountingDown"
              :loading="startCountdownIsRun"
              @click="getVerificationCode(4)"
            >
              {{ t('WhatsApp Business') }}
            </up-button>
            <up-button
              v-if="pagedata.platformObj.normal_acc_login == 1"
              style="width: 6rem; height: auto; min-height: 40px"
              :class="['timer', 'multi-line-btn']"
              :disabled="isCountingDown"
              :loading="startCountdownIsRun"
              @click="getVerificationCode(3)"
            >
              {{ t('WhatsApp Messenger') }}
            </up-button>
            <up-button
              v-if="pagedata.platformObj.universal_acc_login == 1"
              style="width: 6rem; height: auto; min-height: 40px"
              :class="['timer', 'multi-line-btn']"
              :disabled="isCountingDown"
              :loading="startCountdownIsRun"
              @click="getVerificationCode(2)"
            >
              {{ t('WhatsApp WEB') }}
            </up-button>
       <!--     <up-button
              v-if="pagedata.platformObj.biz_acc_login != 1 && pagedata.platformObj.normal_acc_login != 1 && pagedata.platformObj.universal_acc_login != 1"
              style="width: 4rem; height: 40px"
              :class="['timer']"
              :disabled="isCountingDown"
              :loading="startCountdownIsRun"
              @click="getVerificationCode(2)"
            >
              {{ t('Get key') }}
            </up-button> -->
          </view>
        </view>

        <!-- 步骤2 -->
        <view class="step-container">
          <view class="step-label">
            {{ t('2. Open') }}
            <img src="../../static/whatsapp.png" class="inline-icon" />
            {{ t('WhatsApp on your phone, click the link with phone number, and enter this code on your phone!') }}
          </view>

          <view class="verification-code">
            <up-code-input
              v-model="verificationCode"
              :maxlength="8"
              @change="codeChange"
              @finish="codeFinish"
              mode="box"
              type="letter-number"
              size="30"
              :space="10"
              :bold="true"
            ></up-code-input>
          </view>
          <view v-show="isCountingDown">
            <view class="copy-btn" @click="copeVerificationCode">{{ t('Copy') }}</view>
            <view class="verification-status">{{ t('Waiting for verification') }}</view>
          </view>
        </view>

        <!-- WhatsApp -->
        <view class="login-guide">
          <view class="guide-title">{{ t('Login to WhatsApp') }}</view>

          <!-- 1 -->
          <view class="guide-steps">
            <view class="guide-step">
              <text class="step-num">1.</text>
              <view class="step-content"> {{ t('Open') }} <text class="bold-text">WhatsApp</text> </view>
            </view>

            <view class="guide-step">
              <text class="step-num">2.</text>
              <view class="step-content">
                {{ t('Tap') }} <text class="bold-text">{{ t('Settings') }}</text>  <text>({{ t('on iPhone') }})</text> {{ t('or') }}
                <text class="bold-text">{{ t('Menu') }}</text><text>({{ t('on Android') }})</text>
              </view>
            </view>

            <view class="guide-step">
              <text class="step-num">3.</text>
              <view class="step-content">
                {{ t('Tap') }} <text class="bold-text">{{ t('Linked Devices') }}</text> {{ t('then') }} <text class="bold-text">{{ t('Link a Device') }}</text>
              </view>
            </view>

            <view class="guide-step">
              <text class="step-num">4.</text>
              <view class="step-content"> {{ t('Point your phone at this screen and scan the QR code') }} </view>
            </view>

            <view class="guide-step">
              <text class="step-num">5.</text>
              <view class="step-content">
                {{ t('Switch to phone number association, enter verification code') }} <text class="bold-text">77777777</text>
              </view>
            </view>

            <view class="guide-step">
              <text class="step-num">6.</text>
              <view class="step-content">
                {{ t('While the conversation is loading, keep both apps open and connected to the network (Wi-Fi, 4G or faster)') }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </up-popup>

    <!--  -->
    <up-popup 
      :show="baseData.showSuccess" 
      mode="center" 
      :round="20"
      :closeable="false"
    >
      <view class="success-popup">
        <view class="success-icon"></view>
        <text class="success-title">{{ t('Login Successful!') }}</text>
        <text class="success-message">{{ t('Welcome back') }}, {{ baseData.wsAccount }}!</text>
        <view class="success-btn" @click="sures">
          <text class="success-btn-text">{{ t('Continue') }}</text>
        </view>
      </view>
    </up-popup>

    <!--  -->
    <up-popup :show="videoPopupVisible" mode="center" @close="closeVideoPopup">
      <view class="video-popup">
        <video 
          class="popup-video" 
          src="../../static/video/taskflix.mp4" 
          :controls="true" 
          :autoplay="true"
          @ended="videoEnded"
        ></video>
        <view class="close-btn" @click="closeVideoPopup">X</view>
      </view>
    </up-popup>
     
    <!--  -->
    <view class="bottom-nav">
      <up-tabbar :value="pageIndex" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
        <up-tabbar-item text="" @click="changMainPage(0)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/h_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changPage(1)">
          <template #inactive-icon>
            <image class="nav-icon-img active" src="@/static/img/scan_2.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changPage(3)">
          <template #inactive-icon>
            <image class="nav-icon-img" src="@/static/img/w_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
        <up-tabbar-item text="" @click="changMainPage(2)">
          <template #inactive-icon>
            <image class="nav-icon-img " src="@/static/img/m_1.png" mode="aspectFit"></image>
          </template>
        </up-tabbar-item>
      </up-tabbar>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.scan-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;

  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }

  .circle-1 {
    width: 200rpx;
    height: 200rpx;
    top: 15%;
    right: -50rpx;
    animation: float 6s ease-in-out infinite;
  }

  .circle-2 {
    width: 150rpx;
    height: 150rpx;
    bottom: 25%;
    left: -30rpx;
    animation: float 8s ease-in-out infinite reverse;
  }

  .circle-3 {
    width: 100rpx;
    height: 100rpx;
    top: 60%;
    right: 20%;
    animation: float 10s ease-in-out infinite;
  }

  .floating-shape {
    position: absolute;
    font-size: 40rpx;
    animation: bounce 3s ease-in-out infinite;
  }

  .shape-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
  }

  .shape-2 {
    top: 50%;
    right: 15%;
    animation-delay: 1s;
  }

  .shape-3 {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
  }
}

.header-section {
  text-align: center;
  padding: 100rpx 40rpx 80rpx;
  position: relative;
  z-index: 2;
  overflow: hidden;

  // 
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600rpx;
    height: 300rpx;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.08) 30%,
      transparent 70%
    );
    animation: header-glow 4s ease-in-out infinite alternate;
  }

  .brand-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
    position: relative;

    .title-text {
      font-size: 56rpx;
      font-weight: 800;
      background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e6f3ff 25%,
        #ffffff 50%,
        #f0f8ff 75%,
        #ffffff 100%
      );
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-right: 25rpx;
      position: relative;
      animation: 
        title-shimmer 3s ease-in-out infinite,
        title-float 4s ease-in-out infinite;
      
      // 
      text-shadow: 
        0 0 20rpx rgba(255, 255, 255, 0.5),
        0 0 40rpx rgba(255, 255, 255, 0.3),
        0 0 60rpx rgba(255, 255, 255, 0.1);

      // 
      &::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
        background-size: 400% 400%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: gradient-shift 3s ease infinite;
        filter: blur(2rpx);
        opacity: 0.7;
      }
    }

    .title-icon {
      font-size: 48rpx;
      position: relative;
      animation: 
        icon-bounce 2s ease-in-out infinite,
        icon-glow 3s ease-in-out infinite alternate;
      
      // 
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80rpx;
        height: 80rpx;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.3) 0%,
          transparent 70%
        );
        border-radius: 50%;
        animation: icon-halo 2s ease-in-out infinite;
      }
    }

    // 
    &::after {
      content: '';
      position: absolute;
      top: -30rpx;
      right: -40rpx;
      font-size: 24rpx;
      animation: 
        star-twinkle 2s ease-in-out infinite,
        star-float 3s ease-in-out infinite;
      opacity: 0.8;
    }
  }

  .subtitle {
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 4rpx;
    position: relative;
    animation: subtitle-glow 3s ease-in-out infinite alternate;
    
    // 
    &::after {
      content: '';
      position: absolute;
      bottom: -15rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 100rpx;
      height: 4rpx;
      background: linear-gradient(90deg, transparent, #ffffff, transparent);
      border-radius: 2rpx;
      animation: underline-expand 2s ease-in-out infinite;
    }
  }

  // 
  .particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .particle {
      position: absolute;
      width: 6rpx;
      height: 6rpx;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      animation: particle-float 4s linear infinite;

      &:nth-child(1) {
        left: 10%;
        animation-delay: 0s;
      }
      &:nth-child(2) {
        left: 30%;
        animation-delay: 1s;
      }
      &:nth-child(3) {
        left: 50%;
        animation-delay: 2s;
      }
      &:nth-child(4) {
        left: 70%;
        animation-delay: 3s;
      }
      &:nth-child(5) {
        left: 90%;
        animation-delay: 0.5s;
      }
    }
  }
}

.video-section {
  padding: 0 40rpx 40rpx;

  .video-container {
    position: relative;
    border-radius: 25rpx;
    overflow: hidden;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);

    .demo-video {
      width: 100%;
      height: 400rpx;
      object-fit: cover;
    }

    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; /*  */

      .play-indicator {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: pulse 2s ease-in-out infinite;

        .play-icon {
          font-size: 40rpx;
          color: #667eea;
          margin-left: 8rpx;
        }
      }

      .video-duration {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: white;
        opacity: 0.9;
      }
    }
  }
}

.action-section {
  padding: 60rpx 40rpx;
  position: relative;
  z-index: 2;

  // 
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0.05) 100%
    );
    border-radius: 40rpx;
    backdrop-filter: blur(20rpx);
    animation: section-glow 4s ease-in-out infinite alternate;
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    position: relative;
    z-index: 1;

    .primary-btn {
      position: relative;
      background: linear-gradient(
        135deg,
        #667eea 0%,
        #764ba2 50%,
        #667eea 100%
      );
      background-size: 200% 200%;
      border-radius: 30rpx;
      padding: 40rpx 60rpx;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation: primary-pulse 3s ease-in-out infinite;

      // 
      &::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          45deg,
          transparent 30%,
          rgba(255, 255, 255, 0.3) 50%,
          transparent 70%
        );
        transform: rotate(45deg);
        animation: shine-sweep 3s ease-in-out infinite;
      }

      // 
      &::after {
        content: '';
        position: absolute;
        top: -4rpx;
        left: -4rpx;
        right: -4rpx;
        bottom: -4rpx;
        background: linear-gradient(
          45deg,
          #ff6b6b,
          #4ecdc4,
          #45b7d1,
          #96ceb4,
          #feca57,
          #ff9ff3
        );
        background-size: 400% 400%;
        border-radius: 34rpx;
        z-index: -1;
        animation: border-rainbow 4s ease infinite;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:active {
        transform: scale(0.95);
        
        &::after {
          opacity: 1;
        }
      }

      .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20rpx;
        position: relative;
        z-index: 2;

        .btn-icon {
          font-size: 36rpx;
          animation: icon-dance 2s ease-in-out infinite;
          filter: drop-shadow(0 0 10rpx rgba(255, 255, 255, 0.5));
        }

        .btn-text {
          font-size: 32rpx;
          font-weight: bold;
          color: white;
          text-shadow: 
            0 2rpx 10rpx rgba(0, 0, 0, 0.3),
            0 0 20rpx rgba(255, 255, 255, 0.2);
          animation: text-glow 2s ease-in-out infinite alternate;
        }
      }

      // 
      .btn-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;

        .particle {
          position: absolute;
          width: 4rpx;
          height: 4rpx;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          animation: btn-particle-float 3s linear infinite;

          &:nth-child(1) {
            left: 20%;
            animation-delay: 0s;
          }
          &:nth-child(2) {
            left: 40%;
            animation-delay: 0.5s;
          }
          &:nth-child(3) {
            left: 60%;
            animation-delay: 1s;
          }
          &:nth-child(4) {
            left: 80%;
            animation-delay: 1.5s;
          }
        }
      }
    }

    .secondary-btn {
      position: relative;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20rpx);
      border: 2rpx solid rgba(255, 255, 255, 0.2);
      border-radius: 25rpx;
      padding: 35rpx 50rpx;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s ease;
      animation: secondary-float 4s ease-in-out infinite;

      // 
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s ease;
      }

      &:active {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.15);
        
        &::before {
          left: 100%;
        }
      }

      .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15rpx;

        .btn-icon {
          font-size: 30rpx;
          animation: secondary-icon-pulse 3s ease-in-out infinite;
        }

        .btn-text {
          font-size: 28rpx;
          font-weight: 600;
          color: rgba(255, 255, 255, 0.9);
          text-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.3);
        }
      }
    }

    // 
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 2rpx;
      height: 60rpx;
      background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
      );
      animation: connection-line 2s ease-in-out infinite;
    }
  }
}

// 
.bodys {
			width: 18rem;
			height: 20rem;
			background: rgba(0, 0, 0, 0);
			display: flex;
			flex-flow: column;
		
			.heads {
				width: 10rem;
				color: #fff;
				background: url('../../static/video/qrtbg3.png') no-repeat;
				background-size: 100% 100%;
				margin: 0 auto;
				padding: 0.2rem 0.8rem;
				font-size: 0.8rem;
				text-align: center;
			}
		
			.qrboder {
				margin: 1rem auto;
				background: url('../../static/video/qrborder3.png') no-repeat;
				background-size: 100% 100%;
				width: 13rem;
				height: 13rem;
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
		
				image {
					width: 176px;
					height: 176px;
				}
		
				.qrimg {
					width: 176px;
					height: 176px;
				}
			}
		
			.qrs {
				position: absolute;
				width: 176px;
				height: 176px;
				background-color: rgba(255, 255, 255, 0.6);
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(2px);
		
				.ti {
					font-size: 0.8rem;
					color: rgb(73, 164, 255);
					font-weight: bold;
					width: 100%;
					text-align: center;
				}
		
				.btnss {
					padding: 0.2rem 2rem;
					border-radius: 2rem;
					margin-top: 1rem;
					font-size: 0.8rem;
					color: #fff;
					cursor: pointer;
					background: linear-gradient(to right, rgb(59, 197, 255), rgb(60, 142, 254));
					/*  */
				}
			}
		
			.scans {
				position: absolute;
				top: 3.5rem;
				width: 176px;
				height: 176px;
				background: linear-gradient(to top, #e0f7ff, transparent);
				animation: scan 3s linear infinite;
				border-bottom: 1px solid rgb(73, 164, 255);
			}
		
			@keyframes scan {
				0% {
					height: 0px;
				}
		
				100% {
					height: 176px;
				}
			}
		
			.hrs {
				width: 16rem;
				margin: 0 auto;
				border-bottom: 2px dashed #F1F1EF;
				margin-top: 0.4rem;
			}
		}

// 
.bind-account-popup {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 25rpx 25rpx 0 0;
  padding: 40rpx;
  min-height: 60vh;
  max-height: 80vh;
  overflow-y: auto;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: white;
      text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
    }

    .popup-close {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      color: white;
      cursor: pointer;
    }
  }

  .step-container {
    margin-bottom: 40rpx;

    .step-label {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 20rpx;
      line-height: 1.6;

      .inline-icon {
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
        margin: 0 10rpx;
      }
    }

    .phone-input-row {
      display: flex;
      gap: 20rpx;
      align-items: center;

      .input-container {
        flex: 1;
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 15rpx;
        overflow: hidden;

        .country-code {
          padding: 25rpx 20rpx;
          font-size: 28rpx;
          color: #333;
          border-right: 2rpx solid #e0e0e0;
          background: rgba(102, 126, 234, 0.1);
        }

        .phone-input {
          flex: 1;
          padding: 25rpx 20rpx;
          font-size: 28rpx;
          border: none;
          background: transparent;
        }
      }

      .timer {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: white !important;
        border-radius: 15rpx !important;
        padding: 25rpx 30rpx !important;
        font-size: 24rpx !important;
        font-weight: bold !important;
        min-width: 150rpx !important;
        height: auto !important;
        box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3) !important;

        &:disabled {
          background: rgba(255, 255, 255, 0.3) !important;
          color: rgba(255, 255, 255, 0.7) !important;
        }
      }
    }

    .verification-code {
      margin: 30rpx 0;
      display: flex;
      justify-content: center;
    }

    .copy-btn {
      color: white;
      text-align: center;
      margin: 20rpx 0;
      font-size: 28rpx;
      font-weight: 500;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.2);
      padding: 20rpx 40rpx;
      border-radius: 15rpx;
      backdrop-filter: blur(10px);
    }

    .verification-status {
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      margin: 20rpx 0;
      font-size: 26rpx;
    }

    
    .account-type-buttons {
      display: flex;
      gap: 20rpx;
      margin-top: 30rpx;
      flex-wrap: wrap;
      justify-content: space-between;
      
      .timer {
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: white !important;
        border-radius: 15rpx !important;
        padding: 25rpx 30rpx !important;
        font-size: 24rpx !important;
        font-weight: bold !important;
        min-width: 150rpx !important;
        height: auto !important;
        box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3) !important;

        &:disabled {
          background: rgba(255, 255, 255, 0.3) !important;
          color: rgba(255, 255, 255, 0.7) !important;
        }
      }
      
      .multi-line-btn {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
        padding: 15rpx 20rpx !important;
        text-align: center !important;
      }
    }
  }

  .login-guide {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20rpx;
    padding: 30rpx;

    .guide-title {
      font-size: 32rpx;
      font-weight: bold;
      color: white;
      margin-bottom: 25rpx;
      text-align: center;
      text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
    }

    .guide-steps {
      .guide-step {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20rpx;

        .step-num {
          width: 40rpx;
          font-weight: bold;
          color: #ffd700;
          flex-shrink: 0;
          text-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.3);
        }

        .step-content {
          flex: 1;
          color: rgba(255, 255, 255, 0.9);
          font-size: 26rpx;
          line-height: 1.6;

          .bold-text {
            font-weight: bold;
            color: white;
            text-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }
}

// 
.success-popup {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 25rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  width: 500rpx;
  max-width: 90vw;

  .success-icon {
    font-size: 80rpx;
    margin-bottom: 30rpx;
    animation: bounce 1s ease-in-out;
  }

  .success-title {
    font-size: 36rpx;
    font-weight: bold;
    color: white;
    margin-bottom: 20rpx;
    display: block;
    text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
  }

  .success-message {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40rpx;
    display: block;
  }

  .success-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 25rpx;
    padding: 30rpx 60rpx;
    cursor: pointer;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    .success-btn-text {
      font-size: 28rpx;
      font-weight: bold;
      color: white;
    }
  }
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: var(--uni-app-max-width);

  .nav-icon-img {
    width: 60rpx;
    height: 60rpx;
    transition: all 0.3s ease;

    &.active {
      transform: scale(1.2);
      filter: brightness(1.2);
    }
  }
}

/*  */
.video-popup {
  width: 100vw;
  .popup-video {
    width: 100%;
    height: 60vh;
  }
  .close-btn {
    position: fixed;
    right: 50%;
    transform: translate(50%);
    z-index: 99999 !important;
    font-size: 2.1875rem;
    color: #fff;
    padding: 0 .46875rem;
  }
}

// 
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes rotate {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@keyframes title-glow {
  0% {
    text-shadow: 
      0 4rpx 20rpx rgba(255, 255, 255, 0.3),
      0 0 40rpx rgba(255, 255, 255, 0.2);
  }
  100% {
    text-shadow: 
      0 4rpx 30rpx rgba(255, 255, 255, 0.5),
      0 0 60rpx rgba(255, 255, 255, 0.4);
  }
}

@keyframes halo-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1.1);
  }
}

@keyframes subtitle-glow {
  0% {
    text-shadow: 
      0 0 10rpx rgba(255, 255, 255, 0.5),
      0 2rpx 15rpx rgba(0, 0, 0, 0.3);
  }
  100% {
    text-shadow: 
      0 0 20rpx rgba(255, 255, 255, 0.8),
      0 2rpx 20rpx rgba(0, 0, 0, 0.4);
  }
}

@keyframes underline-expand {
  0%, 100% {
    width: 100rpx;
    opacity: 0.6;
  }
  50% {
    width: 150rpx;
    opacity: 1;
  }
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100rpx) rotate(360deg);
    opacity: 0;
  }
}

@keyframes header-glow {
  0% {
    opacity: 0.3;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1.1);
  }
}

@keyframes title-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes title-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8rpx);
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes icon-bounce {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-10rpx) rotate(5deg);
  }
  75% {
    transform: translateY(-5rpx) rotate(-3deg);
  }
}

@keyframes icon-glow {
  0% {
    filter: drop-shadow(0 0 10rpx rgba(255, 255, 255, 0.5));
  }
  100% {
    filter: drop-shadow(0 0 20rpx rgba(255, 255, 255, 0.8));
  }
}

@keyframes icon-halo {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes star-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15rpx);
  }
}

@keyframes section-glow {
  0% {
    box-shadow: 
      0 0 30rpx rgba(255, 255, 255, 0.1),
      inset 0 0 30rpx rgba(255, 255, 255, 0.05);
  }
  100% {
    box-shadow: 
      0 0 50rpx rgba(255, 255, 255, 0.2),
      inset 0 0 50rpx rgba(255, 255, 255, 0.1);
  }
}

@keyframes primary-pulse {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 
      0 10rpx 30rpx rgba(102, 126, 234, 0.3),
      0 0 50rpx rgba(118, 75, 162, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 
      0 15rpx 40rpx rgba(102, 126, 234, 0.4),
      0 0 70rpx rgba(118, 75, 162, 0.3);
  }
}

@keyframes shine-sweep {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
}

@keyframes border-rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes icon-dance {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5rpx) rotate(5deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  75% {
    transform: translateY(-3rpx) rotate(-3deg);
  }
}

@keyframes text-glow {
  0% {
    text-shadow: 
      0 2rpx 10rpx rgba(0, 0, 0, 0.3),
      0 0 20rpx rgba(255, 255, 255, 0.2);
  }
  100% {
    text-shadow: 
      0 2rpx 15rpx rgba(0, 0, 0, 0.4),
      0 0 30rpx rgba(255, 255, 255, 0.4);
  }
}

@keyframes btn-particle-float {
  0% {
    transform: translateY(100%) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20rpx) rotate(180deg);
    opacity: 0;
  }
}

@keyframes secondary-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5rpx);
  }
}

@keyframes secondary-icon-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
}

@keyframes connection-line {
  0%, 100% {
    opacity: 0.3;
    height: 60rpx;
  }
  50% {
    opacity: 0.8;
    height: 80rpx;
  }
}

@keyframes radio-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>